<template>
  <q-item>
    <q-item-section>
      <div class="row items-center">
        <div>
          <q-icon size="24px" color="primary" name="loyalty"></q-icon>
        </div>
        <div class="q-pl-sm text-bold">标签热度榜</div>
      </div>
    </q-item-section>
    <q-item-section side top>
      <div class="row">
        <q-btn
          dense
          round
          flat
          icon="refresh"
          @click="
            () => {
              f5()
            }
          "
        >
          <q-tooltip> 刷新 </q-tooltip>
        </q-btn>
      </div>
    </q-item-section>
  </q-item>
  <q-separator />
  <template v-for="(item, index) in rows" :key="item.id">
    <q-item clickable :to="'/tag/' + item.id">
      <q-item-section>
        <q-item-label>
          <q-chip icon="tag" clickable class="cursor-pointer q-mx-none" square dense>
            <span class="text-caption">{{ item.name }}</span>
          </q-chip>
        </q-item-label>
        <q-item-label caption lines="2"> 最新文章: {{ item.newArtTitle }} </q-item-label>
      </q-item-section>

      <q-item-section side>
        <q-item-label caption>
          阅读数:
          <span class="text-bold">{{ item.readNum }}</span>
        </q-item-label>
      </q-item-section>
      <q-item-section side>
        <q-btn
          flat
          :loading="btnLoad[index]"
          @click.prevent="
            async () => {
              btnLoad[index] = true
              const { data, error } = await globalFollowTag({
                tagId: item.id,
              })
              btnLoad[index] = false
              if (error) {
                return
              }
              item.followFlag = data
              Ok(data ? '关注成功' : '已取消关注')
            }
          "
          :color="item.followFlag ? 'positive' : 'info'"
          dense
          :label="item.followFlag ? '取关' : '关注'"
        />
      </q-item-section>
    </q-item>
    <q-separator />
  </template>
  <q-item v-if="loading">
    <q-item-section>
      <q-item-label lines="1"><q-skeleton type="text" /></q-item-label>
      <q-item-label caption lines="2"><q-skeleton type="text" /></q-item-label>
    </q-item-section>
    <q-item-section side>
      <q-item-label caption>
        阅读数:
        <span><q-skeleton type="text" /></span>
      </q-item-label>
    </q-item-section>
  </q-item>
  <div class="full-width row flex-center" v-if="!loading && pageParam.totalPage > 0">
    <q-btn
      color="primary"
      :disable="pageParam.pageNum == pageParam.totalPage"
      :label="pageParam.pageNum == pageParam.totalPage ? '已加载全部' : '加载更多'"
      flat
      @click="
        () => {
          pageParam.pageNum++
          load()
        }
      "
    />
  </div>
</template>

<script setup lang="ts">
import type { ApiType } from 'src/service/api'
import { globalFollowTag } from 'src/service/api'
import { rankingTag } from 'src/service/api/ranking'
import { useYuan } from 'src/use'
import useBoolean from 'src/use/useBoolean'
import { onMounted, ref } from 'vue'

type rowType = ApiType<typeof rankingTag>['Return']['rows'][0]

const rows = ref<Array<rowType>>([])

const { bool: loading, setTrue: startLoad, setFalse: stopLoad } = useBoolean()

const btnLoad = ref<Array<boolean>>([])

const { Ok } = useYuan()

const pageParam = ref({
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  order: 'read_num',
})

const f5 = async () => {
  rows.value = []
  pageParam.value.pageNum = 1
  load()
}

const load = async () => {
  startLoad()
  const { data, error } = await rankingTag(pageParam.value)
  stopLoad()
  if (!error) {
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
    rows.value.push(...data.rows)
  }
}

onMounted(() => {
  f5()
})
</script>

<style scoped></style>
